<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 
        以下是 flex 布局常用属性说明（父元素上的属性）：
        2.flex-direction    调整主轴方向（默认为水平方向 ），子盒子如何在父盒子里面水平对齐方式 
        3.flex-wrap         控制是否换行，当我们子盒子内容宽度多于父盒子的时候如何处理 
        4.flex-flow         是 flex-direction、flex-wrap 的简写形式 
        5.justify-content   调整主轴对齐（水平对齐 ），子盒子如何在父盒子里面水平对齐方式 
        6.align-items       调整侧轴对齐（垂直对齐 ），子盒子如何在父盒子里面垂直对齐（单行） 
        7.align-content     由 flex-wrap 产生的独立行，多行垂直对齐方式 

        设置在子元素上的属性:
        1.flex: 1;         简写属性，1 代表每个伸缩项各占一份
                           flex 是 flex-grow、flex-shrink、flex-basis 的缩写 
                           flex: 1;  ==>  flex-grow:1; flex-shrink:1;  flex-basis:0%; 
        2.flex-grow        可以来扩展子元素的宽度，设置当前元素应该占据剩余空间的比例值 
        3.flex-shrink      定义收缩比例，通过设置的值来计算收缩空间（前提：子元素的宽度和超过父盒子的大小，并且没有设置... ）
        4.order            控制当前元素的排列顺序,数值越小越靠前，可以为负数，默认值为0；
        */

        .box1{
            height: 200px;
            width:  500px;
            background-color: red;
            display: flex;
        }
        .box1 .item1{
            height: 100px;
            flex:1;
            background-color: aquamarine;
            border: 1px solid black;
        }
        .box1 .item1:nth-child(4){
            order: 2;
        }
        .box1 .item1:nth-child(5){
            order: 1;
        }
    </style>
</head>
<body>
     <div class="box1">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
</body>
</html>